<template>
	<!-- 我的地址 -->
	<view>
		<view class="selreceiver">
			<!-- 标题 -->
			<view class="selreceiver_top">
				<text class="selreceiver_top_left">配送地址</text>
				<text @click="addreceiver" class="selreceiver_top_right">新增配送地址</text>
			</view>
			<!-- 地址列表 -->
			<view class="selreceiver_list">
				<view v-for="(item,index) of user_locations" :key="index" class="selreceiver_list_li">
					<view class="selreceiver_list_li_left">
						<view class="selreceiver_list_li_left_img" v-if="item.cgn_default=='true'">
							<image mode="widthFix" src="http://localhost:3000/img/gouxuan.png"></image>
						</view>
						<view class="selreceiver_list_li_content" @click="order_recerve(item.cgn_id)">
							<view class="selreceiver_list_li_content_top">
								<text class="selreceiver_list_li_content_name">{{item.cgn_name}}</text>
								<text class="selreceiver_list_li_content_phone">{{item.cgn_tel}}</text>
								<text class="selreceiver_list_li_content_default" v-if="item.cgn_default=='true'">默认</text>
							</view>
							<text class="selreceiver_list_li_content_receiver">{{item.cgn_address}}</text>
						</view>
					</view>
					<view class="selreceiver_list_li_right" @click="editreceiver(item.cgn_id)">
						<van-icon size="32rpx" color="#bcbcbc" name="edit" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 我的地址列表
				user_locations:[],
				// 选中的地址
				localhost:'',
				// 用户id
				user_id:'',
				// 默认的用户地址id
				cgn_id:'',
				// 判断是否可以点击
				nav:'',
				// 用户信息
				userinfo:{}
			}
		},
		onLoad(user_id) {
			
			console.log(user_id)
			this.user_id=user_id.user_id
			this.nav=user_id.nav
		},
		onShow() {
			this.getusers()
			
			console.log(this.user_id)
		},
		methods:{
			// 获取用户信息
			getusers(){
				uni.getStorage({
					key:"user",
					success: (user) => {
						this.userinfo=JSON.parse(user.data)
						this.getuserlocations(JSON.parse(user.data).user_id)
						this.getuserlocations_default(JSON.parse(user.data).user_id)
					},
					fail:()=> {
						// this.userinfo.username.username=undefined
						// console.log('失败')
						console.log(this.userinfo.username)
					}
				})
			},
			// 获取地址列表
			getuserlocations(user_id){
				uni.request({
					url:"http://localhost:3001/user_locations",
					data:{user_id:user_id},
					method:"GET",
					success: (res) => {
						this.user_locations=res.data.data
						// this.localhost=19
						console.log(res)
					}
				})
			},
			// 获取默认地址
			getuserlocations_default(user_id){
				uni.request({
					url:"http://localhost:3001/user_locations_default",
					data:{user_id:user_id},
					method:"GET",
					success: (res) => {
						if(res.data.data.length>0){
							this.user_locations.unshift(res.data.data[0])
							// this.localhost=19
							this.cgn_id=res.data.data[0].cgn_id
							uni.setStorage({
								key:"cgn_id",
								data:this.cgn_id
							})
							console.log(res)
						}
					}
				})
			},
			// 点击新增收货地址,进入新增地址界面
			addreceiver(){
				uni.navigateTo({
					url:"./addreceiver"
				})
			},
			// 点击编辑按钮,进入编辑地址界面
			editreceiver(id){
				uni.navigateTo({
					url:"./addreceiver?id="+id
				})
			},
			// 点击地址,给我的购物车修改地址
			order_recerve(cgn_id){
				if(this.nav){
					console.log(cgn_id,'sssss')
					uni.setStorage({
						key:"cgn_ids",
						data:cgn_id,
						success() {
							uni.navigateBack()
						}
					})
				}else{
					console.log('bux')
				}
			}
		}
	}
</script>

<style>
	page{
		width: 750rpx;
		height: 100%;
		background-color: #f3f3f3;
		padding: 20rpx;
		box-sizing: border-box;
	}
	image{
		display: block;
		width: 100%;
	}
	.selreceiver{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx;
	}
	.selreceiver_top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 10rpx;
	}
	.selreceiver_top_left{
		font-size: 20rpx;
		color: #000000;
	}
	.selreceiver_top_right{
		font-size: 18rpx;
		color: #6e9df1;
	}
	.selreceiver_list{
		
	}
	.selreceiver_list_li{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 10rpx;
		border-top: 2rpx solid #eee;
		
	}
	.selreceiver_list_li_left{
		display: flex;
		align-items: center;
	}
	.selreceiver_list_li_left_img{
		width: 36rpx;
		margin-right: 20rpx;
	}
	.selreceiver_list_li_content{
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
	}
	.selreceiver_list_li_content_top{
		display: flex;
		color: red;
	}
	.selreceiver_list_li_content_receiver{
		color: #999;
	}
	.selreceiver_list_li_content_name{
		margin-right: 20rpx;
	}
	.selreceiver_list_li_content_phone{
		margin-right: 10rpx;
	}
	.selreceiver_list_li_content_default{
		width: 58rpx;
		height: 28rpx;
		border: 2rpx solid red;
		border-radius: 50rpx;
		font-size: 18rpx;
		text-align: center;
		line-height: 28rpx;
	}
</style>
